<!DOCTYPE HTML>
<html>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>my_hotel Template</title>
  <style type="text/css" media="screen">
    p, table, hr, .box { font-family: arial; margin-bottom:25px; }
    .box p { margin-bottom:10px; }
  </style>
</head>


<body>
  <div>

    <h1>&ldquo;my_hotel&rdquo; Template Documentation</h1>

    <p><strong>Template version: 2.0<br />Created: March 16th 2013</strong></p>

    <div>
      <p>Thank you for downloading this template.</p>
      <p>This template is released under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>. This means you are free to download and use it for personal and commercial projects. However, you <strong>must leave the 'design from css3templates.co.uk' link in the footer of the template</strong>.</p>
      <p>If you have any questions that are beyond the scope of this help file, please feel free to contact me via my <a href="http://www.css3templates.co.uk">website</a>. Thank you!</p>
    </div>

    <hr>

    <h2 id="toc">Table of Contents</h2>
    <ol>
      <li><a href="#htmlStructure">HTML Structure</a></li>
      <li><a href="#cssFiles">CSS Files and Structure</a></li>
      <li><a href="#fontFiles">Fonts</a></li>
      <li><a href="#javascript">JavaScript</a></li>
      <li><a href="#credits">Sources and Credits</a></li>
      <li><a href="#galleries">Image Fader</a></li>
    </ol>

    <hr>

    <h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
    <p>Here is the HTML structure for this template.</p>

    <pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;!-- Header Metatags --&gt;
  &lt;!-- Main Stylesheet --&gt;
  &lt;!-- Modernizr JS Enables HTML5 Elements --&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;main&quot;&gt;
    &lt;!-- begin header --&gt;
    &lt;header&gt;
      &lt;div id=&quot;logo&quot;&lt;/div&gt;
      &lt;nav&gt;
        &lt;!-- menu --&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;!-- end header --&gt;
    &lt;!-- begin content --&gt;
    &lt;div id=&quot;site_content&quot;&gt;
      &lt;div id=&quot;sidebar_container&quot;&gt;
        &lt;div class=&quot;gallery&quot;&gt;
          &lt;ul class="images"&gt;
            &lt;li class=&quot;show&quot;&gt;&lt;img src=&quot;images/1.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_one&quot; /&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src=&quot;images/2.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_two&quot; /&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- end content --&gt;
    &lt;!-- begin footer --&gt;
    &lt;footer&gt;&lt;/footer&gt;
    &lt;!-- end footer --&gt;
  &lt;/div&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;!-- jQuery with plugins --&gt;
  &lt;!-- menu --&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(function() {
      $(&quot;#lava_menu&quot;).lavaLamp({
        fx: &quot;backout&quot;,
        speed: 700
      });
    });
  &lt;/script&gt;
&lt;/html&gt;
&lt;/body&gt;
    </pre>

    <hr>

    <h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>

    <p>There is one stylesheet used in this theme:</p>
    <ol>
      <li><b>css/style.css</b></li>
    </ol>

    <ol>
      <li><b>style.css</b> is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.</li>
    </ol>

    <hr>

    <h3 id="fontFiles"><strong>C) Fonts</strong> - <a href="#toc">top</a></h3>

    <p>There are 3 fonts used in this theme. The fonts are News Cycle, Jenna Sue and Droid Sans. The font files are</p>
    <ol>
      <li><b>fonts/NewsCycle-Regular.ttf</b></li>
      <li><b>fonts/NewsCycle-Regular.eot</b> (IE Specific)</li>
      <li><b>fonts/JennaSue-webfont.ttf</b></li>
      <li><b>fonts/JennaSue-webfont.eot</b> (IE Specific)</li>
      <li><b>fonts/DroidSans-webfont.woff</b></li>
      <li><b>fonts/DroidSans-webfont.eot</b> (IE Specific)</li>
    </ol>

    <hr>

    <h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>

    <p>This theme imports several Javascript files.</p>

    <ol>
      <li>js/modernizr-1.5.min.js</li>
      <li>js/jquery.min.js</li>
      <li>js/jquery.easing.min.js</li>
      <li>js/jquery.lavalamp.min.js</li>
      <li>js/jquery.image_fade.js</li>
    </ol>

    <ol>
      <li><b>modernizr</b> is a Javascript library that enables HTML5 elements and feature detects.</li>
      <li><b>jQuery</b> is a Javascript library containing lots of commonly used Javascript functions.</li>
      <li><b>Easing</b> is a jQuery plugin for easing transitions.</li>
      <li><b>Lavalamp</b> is a jQuery plugin for the lavalamp menu.</li>
      <li><b>Image fade</b> contains the functions for the gallery image fader.</li>
    </ol>

    <hr>

    <h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>

    <p>I've used the following images, icons or other files as listed.

    <ul>
      <li><a href="http://www.modernizr.com">modernizr</a> (MIT and BSD licenses)</li>
      <li><a href="http://www.jquery.com">jQuery</a> (MIT and GPL licenses)</li>
      <li><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">Lavalamp menu</a></li>
      <li><a href="http://www.dezinerfolio.com/freebie/project-icon-set">Project Icons - Designed by Navdeep Raj</a>
      <li><a href="http://www.fotogrph.com">Images by Fotogrph</a>
    </ul>

    <hr>

    <h3 id="galleries"><strong>F) Image Fader</strong> - <a href="#toc">top</a></h3>

    <p>The image fader has the following format:</p>

    <pre>
&lt;li&gt;&lt;img width="450" height="450" src="images/image_name.jpg" alt="image one" /&gt;&lt;/li&gt;
    </pre>

    <p>To add an image to the image fader simply add a new list item (li) to the unordered list (ul) with class="images". You need to specify the width of the image, the height of the image, the src and an 'alt' for the image. If you would like the image to hyperlink to another page, simply add an &lt;a&gt;&lt;/a&gt; around the &lt;img&gt; tag.</p>
    <p>NOTE: Remember to put 'class="show"' on the first &lt;li&gt; in the list, so that the image fader knows which one to start with.</p>

    <hr>

    <p>Once again, thank you for downloading this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.</p>

    <p><a href="#toc">Go To Table of Contents</a></p>

    <hr>
  </div>
</body>
</html>